import React, { useState, useEffect } from 'react';
import { Drawer, Descriptions, Spin, Image } from 'antd';
import { NeedManageAPI } from '../common/type';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { EyeInvisibleOutlined } from '@ant-design/icons';
import MyIcon from '@/components/MyIcon';
import { getMaterialDetailServices } from '../services/DetailOAService';
import { formatDecimal, getColorTextDoms } from '../../Acommon';
import { getBaseUrl } from '@/services/urlconst';

const baseUrl = getBaseUrl();

export const DetailDrawerViewOA: React.FC<NeedManageAPI.IDetailDrawerViewOA> = ({ curRes, onClose, isShowDetail, recordObj, reloadDetail }) => {
  /***样式**/
  const prefixCls = 'need-update-';

  const detailCallback = (res: any) => {};
  /**详情方法services*/
  const { getMaterialDetailRun, getMaterialDetailLoading, getMaterialDetailData } = getMaterialDetailServices(detailCallback);

  /**是否展示放大图片-眼睛状态*/
  const [isShowEye, setIsShowEye] = useState<boolean>(false);
  const [imgArr, setImgArr] = useState([]);

  /**改变eye状态方法*/
  const handleClickEye = () => {
    setIsShowEye(!isShowEye);
  };

  useEffect(() => {
    /**触发详情接口*/
    if (recordObj?.materialID) {
      getMaterialDetailRun({ id: recordObj?.materialID });
    }
  }, [recordObj]);

  useEffect(() => {
    if (getMaterialDetailData?.imageInfo) {
      let imgList = recordObj?.imageInfo?.split(',');
      setImgArr(imgList);
    }
  }, [getMaterialDetailData]);

  return (
    <Drawer
      className={prefixCls + 'MaterialDetailDrawer'}
      title="物料详情"
      style={{
        position: 'absolute',
        height: '100%',
        overflow: 'hidden',
      }}
      placement="right"
      onClose={onClose}
      open={isShowDetail}
      getContainer={false}
      width={document.body?.clientWidth * 0.45}
      headerStyle={{ padding: '1rem' }}
      bodyStyle={{ padding: '5px 0' }}
      closable={false}
      destroyOnClose={true}
    >
      <Spin spinning={getMaterialDetailLoading}>
        <ScrollBarLayout style={{ padding: '5px 10px' }}>
          <div className={prefixCls + 'Descriptions'} style={{ margin: '0 5px' }}>
            <Descriptions bordered={true} size="small" column={2} labelStyle={{ width: 220 }}>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-barcode'} />
                    &nbsp; 物料编码
                  </>
                }
              >
                <div>{getMaterialDetailData?.materialNum || '--'}</div>
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-leixing'} />
                    &nbsp; 物料类型
                  </>
                }
              >
                {getColorTextDoms(getMaterialDetailData?.materialTypeName)}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-qianming'} />
                    &nbsp; 物料名称
                  </>
                }
              >
                <div>{getMaterialDetailData?.fullName || '--'}</div>
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-moban'} />
                    &nbsp; 供货分类
                  </>
                }
              >
                {getColorTextDoms(getMaterialDetailData?.supplyTypeName)}
              </Descriptions.Item>

              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-zhuangtai1'} />
                    &nbsp; 物料状态
                  </>
                }
              >
                {getMaterialDetailData?.state == 0
                  ? '起草'
                  : getMaterialDetailData?.state == 1
                  ? '审核中'
                  : getMaterialDetailData?.state == 2
                  ? '有效'
                  : getMaterialDetailData?.state == 3
                  ? '作废'
                  : '--'}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-tupian'} />
                    &nbsp; 相关图片
                  </>
                }
              >
                {recordObj?.imageInfo ? (
                  <div style={{ width: '130px', height: '20px', overflow: 'hidden' }}>
                    {!isShowEye ? <MyIcon type={'icon-eye'} onClick={handleClickEye} /> : <EyeInvisibleOutlined onClick={handleClickEye} />}
                    {imgArr?.length > 0 ? (
                      <>
                        <Image.PreviewGroup
                          preview={{
                            visible: isShowEye,
                            scaleStep: 0.5,
                            // getContainer: () => document?.getElementById(pageRouterDomID) as any,
                            onVisibleChange: (value) => {
                              setIsShowEye(value);
                            },
                          }}
                        >
                          {imgArr?.map((item, index) => {
                            return (
                              <>
                                <Image
                                  style={{ display: 'none' }}
                                  src={baseUrl + item}
                                  // src={'https://ts1.cn.mm.bing.net/th/id/R-C.21f651a9b7d96be274f1f0784874b07b?rik=eDRLwTlVgtRWKA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50089%2f8326.jpg_wh860.jpg&ehk=Hcu8hyvYqUSgjHkijXmJnqZxc%2fvu1KwXGd3wsSLR8Bo%3d&risl=&pid=ImgRaw&r=0'}
                                />
                              </>
                            );
                          })}
                        </Image.PreviewGroup>
                      </>
                    ) : (
                      <>
                        <Image
                          style={{ display: 'none' }}
                          src={baseUrl + imgArr[0]}
                          // src={'https://ts1.cn.mm.bing.net/th/id/R-C.21f651a9b7d96be274f1f0784874b07b?rik=eDRLwTlVgtRWKA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50089%2f8326.jpg_wh860.jpg&ehk=Hcu8hyvYqUSgjHkijXmJnqZxc%2fvu1KwXGd3wsSLR8Bo%3d&risl=&pid=ImgRaw&r=0'}
                          preview={{
                            visible: isShowEye,
                            scaleStep: 0.5,
                            // getContainer: () => document?.getElementById(pageRouterDomID) as any,
                            onVisibleChange: (value) => {
                              setIsShowEye(value);
                            },
                          }}
                        />
                      </>
                    )}
                  </div>
                ) : (
                  '--'
                )}
              </Descriptions.Item>

              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-pinpai'} />
                    &nbsp; 规格型号
                  </>
                }
                span={2}
              >
                {getMaterialDetailData?.modelNum || '--'}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-guize'} />
                    &nbsp; 规格要求（参数）
                  </>
                }
                span={2}
              >
                {getMaterialDetailData?.specInfo || '--'}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-jiage'} />
                    &nbsp; 参考单价（元）
                  </>
                }
              >
                {formatDecimal(getMaterialDetailData?.unitPrice)}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-celianggongju'} />
                    &nbsp; 量化单位
                  </>
                }
              >
                {getColorTextDoms(recordObj?.unitBusinessName)}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-moban'} />
                    &nbsp; 物料介绍
                  </>
                }
                span={2}
              >
                {getMaterialDetailData?.paramsInfo || '--'}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-user'} />
                    &nbsp; 创建人
                  </>
                }
              >
                {getMaterialDetailData?.createrName || '--'}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-time'} />
                    &nbsp; 创建时间
                  </>
                }
              >
                {getMaterialDetailData?.createTime ? getMaterialDetailData?.createTime?.split(' ')?.[0] : '--'}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-gangweitubiao'} />
                    &nbsp; 创建岗位
                  </>
                }
              >
                {getMaterialDetailData?.createPositionName || '--'}
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    <MyIcon type={'icon-bumen'} />
                    &nbsp; 创建部门
                  </>
                }
              >
                {getMaterialDetailData?.createDepartmentName || '--'}
              </Descriptions.Item>
            </Descriptions>
          </div>
        </ScrollBarLayout>
      </Spin>
    </Drawer>
  );
};
